/* 顶部轮播 */
var cloneNode = $('.notice').firstElementChild.cloneNode(true)
$('.notice').appendChild(cloneNode)
var index = 0
var notice_timer = null
function noticePlay() {
  notice_timer = setInterval(function () {
    index++
    animate($('.notice'), 'scrollTop', index * 40, function () {
      if (index === $('.notice li').length - 1) {
        index = 0
        $('.notice').scrollTop = 0
      }

    })
  }, 3000)
}
noticePlay() // 进入页面播放

/* 头部商品分类 部分 */
var template = ''
dataIndex.navs.forEach(function (item) {
  template += `<li>
      <a href="./list.html?class=${item.class}">
        <div><img src="${item.icon}">
        </div>
        <span>${item.title}</span>
      </a>
    </li>`
})
$('.nav_items').innerHTML = template

/* 三个新商品 部分 */
var template2 = ''
dataIndex.Mavic.new.forEach(function (item) {
  template2 += `<a href="detail.html?id=${item.id}" class="recom_items">
        <div class="pic">
          <img class="img_now1"
            src="${item.imgbg1}" alt="">
          <img class="img_now2"
            src="${item.imgbg2}" alt="">
          <img class="img_hover"
            src="${item.imghover}" alt="">
        </div>
        <p class="recom_items_title">${item.title}</p>
        <p class="recom_items_content">${item.cnt}</p>
        <p class="recom_items_description">${item.description}</p>
        <p class="recom_items_price">￥<span>${item.price}</span></p>
      </a>`
})
$('.recom').innerHTML = template2

/* mavic list 部分 */
var template3 = ''
dataIndex.Mavic.list.forEach(function (item) {
  template3 += `<li>
          <a href="./detail.html?id=${item.id}">
          <div class="introduce">
            <img src="${item.imghover}" alt="">
            <p>${item.description}</p>
          </div>
          <div class="mavic_list_bg" style="background-image: url('${item.imgbg}');"></div>
          <h3 class="mavic_list_title">${item.title}</h3>
          <p class="mavic_list_price">￥<span>${item.price}</span></p>
                    </a>
        </li>`
})
$('.mavic_list').innerHTML = template3

// service 部分
$('.service_care img').src = dataIndex.Mavic.service[0]
$('.service_change img').src = dataIndex.Mavic.service[1]

// 返回顶部操作
window.onscroll = function () {
  if (document.documentElement.scrollTop >= 800) {
    $('.toTop').style.display = 'block'
  } else {
    $('.toTop').style.display = 'none'
  }
}
$('.toTop').onclick = function () {
  animate(document.documentElement, 'scrollTop', 0)
}

// 轮播图

// 渲染轮播图数据
var template4 = ''
var template5 = ''
dataIndex.banner.forEach(function (item, index) {
  template4 += `<a href="./detail.html?id=${item.id}">
        <div style="background-image: url('${item.imgurl}');"></div>
      </a>`

  template5 += `<li>${index + 1}</li>`
})
$('.img_wrap').innerHTML = template4
$('.node').innerHTML = template5

// 初始化
// 1.第一个小圆点选中状态
// 2.提高第一张图片的定位层级
// 3.第一张图片透明度从0.1运动到1，启动自动播放
$('.node li')[0].className = 'active'
$('.img_wrap a')[0].style.zIndex = '10'
animate($('.img_wrap a')[0], 'opacity', 1, function () {
  autoplay() //启动自动播放
})

var timer //定义计时器
var currentIndex = 0 //定义现在的下标

function autoplay() {
  timer = setInterval(function () {
    moveNext() //播放下一张
  }, 2400)
}

function moveNext() {// 切换到下一张图片
  // 恢复当前图片的层级和透明度为初始值 
  $('.img_wrap a')[currentIndex].style.zIndex = '5'
  $('.img_wrap a')[currentIndex].style.opacity = '.1'

  //去掉当前选中的小圆点状态
  $('.node li')[currentIndex].className = ''

  currentIndex++
  if (currentIndex >= $('.img_wrap a').length) {
    currentIndex = 0 // 最后一张的下一张回到第一张图片
  }
  // 提高下一张图片的层级为10
  $('.img_wrap a')[currentIndex].style.zIndex = '10'
  // 将下一张图片的透明度从0.1运动到1
  animate($('.img_wrap a')[currentIndex], 'opacity', 1)

  // 写一个小圆点的类名
  $('.node li')[currentIndex].className = 'active'
}

function movePre() {// 切换到下一张图片
  // 恢复当前图片的层级和透明度为初始值 
  $('.img_wrap a')[currentIndex].style.zIndex = '5'
  $('.img_wrap a')[currentIndex].style.opacity = '.1'

  //去掉当前选中的小圆点状态
  $('.node li')[currentIndex].className = ''

  currentIndex--
  if (currentIndex < 0) {
    currentIndex = $('.img_wrap a').length - 1 // 第一张的下一张回到最后一张图片
  }
  // 提高下一张图片的层级为10
  $('.img_wrap a')[currentIndex].style.zIndex = '10'
  // 将下一张图片的透明度从0.1运动到1
  animate($('.img_wrap a')[currentIndex], 'opacity', 1)

  // 写一个小圆点的类名
  $('.node li')[currentIndex].className = 'active'
}

// 点击next按钮切换下一张
$('.next').onclick = function () {
  clearInterval(timer)
  moveNext()
  autoplay()
}
// 点击pre按钮切换上一张
$('.pre').onclick = function () {
  clearInterval(timer)
  movePre()
  autoplay()
}

//点击小圆点切换图标
for (var i = 0; i < $('.node li').length; i++) {
  $('.node li')[i].index = i
  $('.node li')[i].onclick = function () {
    clearInterval(timer)

    // 恢复当前图片的层级和透明度为初始值
    $('.img_wrap a')[currentIndex].style.zIndex = 5
    $('.img_wrap a')[currentIndex].style.opacity = 0.1

    // 去掉当前选中小圆点的选中状态
    $('.node li')[currentIndex].className = ''
    currentIndex = this.index
    $('.img_wrap a')[currentIndex].style.zIndex = 10
    //下一个小圆点添加选中状态
    $('.node li')[currentIndex].className = 'active'

    // 将下一张图片的透明度从0.1运动到1
    animate($('.img_wrap a')[currentIndex], 'opacity', 1)

    autoplay()// 启动自动播放
  }
}

// 窗口失去焦点时停止播放
window.onblur = function () {
  clearInterval(timer)
  clearInterval(notice_timer)
}
// 窗口获得焦点时开始播放
window.onfocus = function () {
  autoplay()// 播放
  noticePlay()// 播放
}


